<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>嵌套路由</title>
  <script src="../js/vue.js"></script>
  <script src="../js/vue_router.js"></script>
</head>
<!-- 
  注意router-link 中的to是否带有"/",
    若带有则会把之前的路由全部抹去，重新写过，
    若无，则在后面添加追加上去
 -->

<body>
  <div id="app">
    <router-link to="/user">首页</router-link>
    <router-link to="/reglist">信息页面了</router-link>

    <router-view></router-view>
  </div>
</body>
<script>
  "use strict";
  const user = {
    template: `<h1>我是首页的内容了</h1>`
  };
  const reglist = {
    template: `
    <div>
      <p>大家好呀，你们来自哪里</p>
      <hr>
      <router-link to="/reglist/ni">你说的吧</router-link>
      <router-link to="/reglist/ta">她知道么</router-link>
      <router-view/>
    </div>
    `
  };

  // reglist的子路由的内容了
  const ni = {
    template: `<h2>你的路由的占位符</h2>`
  };

  const ta = {
    template: `<h3 style="color:red;">她来了，你自己看看吧</h3>`
  };

  const router = new VueRouter({
    routes: [{
      path: "/",
      redirect: "/user"
    }, {
      path: "/user",
      component: user
    }, {
      path: "/reglist",
      component: reglist,
      children: [{
        path: "/reglist/ni",
        component: ni
      }, {
        path: "/reglist/ta",
        component: ta
      }]
    }]
  });

  const vm = new Vue({
    el: "#app",
    data() {
      return {};
    },
    methods: {},
    router
  });
</script>

</html>